<!--
# Copyright 2010 Álvaro Ortega Cabeza & Universidad de Granada
 
# This file is part of SRS.

# SRS is free software: you can redistribute it and/or modify
# it under the terms of the GNU Lesser General Public License as published by
# the Free Software Foundation, either version 3 of the License, or
# (at your option) any later version.

# This program is distributed in the hope that it will be useful,
# but WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
# GNU General Public License for more details.

# You should have received a copy of the GNU Lesser General Public License
# along with this program.  If not, see <http://www.gnu.org/licenses/>.
-->

<!-- MapServer Template -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="Author" content="2008-2009 Alvaro Ortega - UGR">
<title>SRS - GIS</title>
<link href="/Proyecto/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/Proyecto/wz_jsgraphics.js"></script>

</head>

<body background="/Proyecto/images/bg.jpg">

<DIV ID="overDiv" STYLE="position:absolute; visibility:hide; z-index:1;"></DIV>
<SCRIPT LANGUAGE="JavaScript" SRC="/Proyecto/overlib.js"></SCRIPT>

<form method=GET id="formulario" action="/cgi-bin/mapserv" name="mainform">

<script language="javascript" type="text/javascript">
    function goGlobal() {
        document.mainform.imgext.value = "589980 4913700 609000 4928010";
        document.mainform.imgxy.value = "260.5 200.5";
        document.mainform.zoom[1].checked="true";
        document.mainform.elements[3].checked="true";
        document.mainform.submit();
    }
</script>

<div id="container">
<div id="topbar">
<img border="0" src="/Proyecto/images/Logo_sin_fondo2.png" width="550" height="250" style="margin-left: auto; margin-right:auto; display: block;">
</div><!--topbar-->
<div id="navbar"> 
</div><!--navbar-->
<div id="main">
<div id="column_left">

<div id="Reference">
    <h3>Referencia</h3>
    <INPUT TYPE="image" name="ref" src="[ref]" width=187 height=150 bordercolor=#999999 border=1><br>
	<p>
	<p>

	<p>
    <input type="button" value="Full map" onClick="goGlobal()">
</div><!--Reference-->

<div id="mapSelection">

	<h3>Select map(s) and click:</h3>
	
	<input type="submit" value="Refresh/Query"><br>
    	<select multiple name="layer" id="layer" size=5>
        <option value="soils" [soils_select]> soils map (GRASS)
        <option value="rutes" [rutes_select]> rutes map (GRASS)
	<option value="dem" [dem_select]> elevation (GeoTIFF)
        <option value="roads" [roads_select]> roads (SHAPE lines)
        <option value="fields" [fields_select]> fields (SHAPE polygons)
    </select><br>
	<p>

</div><!--mapSelection-->
<div id="Operation">
    <b>Operaciones</b><br>
	<p>
	<p>
	<div id="OperationBox1">
    <input type="checkbox" name="operation3" value="query" id="operation3" onchange="javascript:drawMode(3)"> Query rutes<br>
</div>
<div id="OperationBox1">
    <input type="checkbox" name="operation4" id="operation4" value="query" onchange="javascript:drawMode(4)"> Restricted query rutes<br>
</div>
<div id="OperationBox1">
    <input type="checkbox" name="operation" id="operation" value="draw" onchange="javascript:drawMode(1)"> Draw routes<br>
</div>
<div id="OperationBox1">
    <input type="checkbox" name="operation2" id="operation2" value="selrutes" onchange="javascript:drawMode(2)"> Select Rutes<br>
</div>
<div id="OperationBox1">
    <input type="radio" name=zoomdir id=zoomdir value=1 [zoomdir_1_check]> Zoom in (2x)<br>
</div>
<div id="OperationBox1">
    <input type="radio" name=zoomdir id=zoomdir value=0 [zoomdir_0_check]> Pan<br>
</div>
<div id="OperationBox1">
    <input type="radio" name=zoomdir id=zoomdir value=-1 [zoomdir_-1_check]> Zoom out (-2x)<br>
</div>
<div id="OperationBox1">
    <input type="button" name="Save_Map" id="Save_Map" value="Save Map" onClick="saveMap()">
</div>
</div><!--Operation-->
</div><!--column_left-->
<div id="column_right">

<h4>Perfil de ruta</h4>
<div id="commentBox">
<div id="comment">
    
	<img src="[profile]" name="profile" id="profile" width=265 height=265 onmouseover="return overlib('<img src=&#34[profile]&#34 name=&#34profile&#34 id=&#34profile&#34 width=450 height=450>',LEFT)" onMouseOut="nd();" target="_blank">
</div>
</div>
<div id="params">
	Nombre de la ruta: <INPUT TYPE="text" NAME="Rname" value="[Rname]"><BR>
	Altura Media: <INPUT TYPE="text" NAME="altura" value="[altura]"><BR>
	Longitud: <INPUT TYPE="text" NAME="long" value="[long]"><BR>
	Maxima Pendiente: <INPUT TYPE="text" NAME="pendiente" value="[pendiente]"><BR>
</div>
</div><!--column_right-->
<div id="column_center"> 
    <h1>Superficie del mapa</h1>
    <div id="map">
	<div id="myCanvas" style="position:absolute;height:412px;width:506px; margin-left:70px;" onclick="javascript:optDibujo(event)"></div>
		
		<table width="450" border="0" cellspacing="0" cellpadding="0" align="center">
    		<tr>
      			<td align="right" width="18"><a href="javascript:pan('nw')"><img src="/Proyecto/images/nw.gif" width="18" height="18" border="0" alt="pan northwest"></a></td>
      			<td align="center"><a href="javascript:pan('n')"><img src="/Proyecto/images/n.gif" width="23" height="18" border="0" alt="pan north"></a></td>
      			<td align="left" width="18"><a href="javascript:pan('ne')"><img src="/Proyecto/images/ne.gif" width="18" height="18" border="0" alt="pan northeast"></a></td>
    		</tr>
    		<tr>
				<td align="right" width="18"><a href="javascript:pan('w')"><img src="/Proyecto/images/w.gif" width="18" height="23" border="0" alt="pan west"></a></td>
      			<td align="center"><INPUT NAME="img" id="img" TYPE="image" src="[img]" width=500 height=400 bordercolor=#999999 border=3 onclick="javascript:prueba()"></td>
      			<td align="left" width="18"><a href="javascript:pan('e')"><img src="/Proyecto/images/e.gif" width="18" height="23" border="0" alt="pan east"></a></td>
    		</tr>
    		<tr>
      			<td align="right" width="18"><a href="javascript:pan('sw')"><img src="/Proyecto/images/sw.gif" width="18" height="18" border="0" alt="pan southwest"></a></td>
      			<td align="center"><a href="javascript:pan('s')"><img src="/Proyecto/images/s.gif" width="23" height="18" border="0" alt="pan south"></a></td>
      			<td align="left" width="18"><a href="javascript:pan('se')"><img src="/Proyecto/images/se.gif" width="18" height="18" border="0" alt="pan southeast"></a></td>
    		</tr>
  		</table>

	</div><!--map-->
    <div id="scalebar">
    	<img src="[scalebar]" alt="Scale bar" align="left">
    </div><!--scalebar-->
    <div id="legend">
    	<img src="[legend]" alt="Scale bar" align="right">
    </div><!--scalebar-->

</div><!--column_center-->

<!-- Don't remove spacer div. Solve an issue about container height -->

	<input type="hidden" name="imgxy" value="250.5 200.5">
    	<input type="hidden" name="imgext" value="[mapext]">
    	<input type="hidden" name="map" value="[map]">
	<!-- Esto da las coordenadas reales pero solo si pinchas sobre el mapa (alert(document.mainform.mapxy.value);)-->
	<input type="hidden" name="mapxy" value="[mapx] [mapy]">
	<input type="hidden" name="dibuja" id="dibuja" value=false>
	
	<input type="hidden" name="coordX1" id="coordX1" value="">
	
	<input type="hidden" name="coordY1" id="coordY1" value="">
	<input type="hidden" name="coordX2" id="coordX2" value="">
	<input type="hidden" name="coordY2" id="coordY2" value="">
	<input type="hidden" name="contador" id="contador">
	<input type="hidden" name="arraygeo" id="arraygeo">
	<input type="hidden" name=zoomsize size=2 value=2>
	<input type="hidden" name="mapName" id="mapName" value="">
	<input type="hidden" name="mode" name="id" value="browse">

<div class="spacer"></div>
</div><!--main-->
<div id="footer"></div>

</div><!--container-->

<script>
	//oculta el canvas
	document.getElementById('myCanvas').style.display = 'none';
	var ventana_sec=null;
	var ventana_sec2=null;
</script>

<script>
	var jg = new jsGraphics(document.getElementById("myCanvas"));

	//Se crea al array donde se guardaran las coordenadas de la ruta	
	var arrayCoord = new Array();
	var indice=0;
	/*var x1min=589989.584;
	var x1max=608960.726;
	var x2min=589989.585;
	var x2max=608990.415;
	var y1min=4914056.266;
	var y1max=4927831.867;
	var y2min=4914204.710;
	var y2max=4927980.311;*/
	
	/*var x1min=589980 ;
	var x1max=609000;
	var x2min=589980 ;
	var x2max=609000;
	var y1min=4913700;
	var y1max=4928010;
	var y2min=4913700;
	var y2max=4928010;*/

	var x1min=589980 ;
	var x1max=609000;
	var x2min=589980 ;
	var x2max=609000;
	var y1min=4928010;
	var y1max=4913700;
	var y2min=4928010;
	var y2max=4913700;
</script>

</form>
<script>
function optDibujo(e){
	if(document.getElementById("operation").checked){
		pinta(e);
	}
	else if(document.getElementById("operation2").checked || document.getElementById("operation3").checked){
		pintaCuadrado(e);
	}
}
</script>
<script>
function Dibuja(x1,y1,x2,y2){
	jg.setColor("#ff0000"); // green
  	jg.drawLine(parseInt(x1), parseInt(y1), parseInt(x2), parseInt(y2)); // co-ordinates related to myCanvas
	jg.paint(); // draws, in this case, directly into the document
}
</script>
<script>
function drawMode(e){

	document.getElementById("Save_Map").disabled=false;
	document.getElementById("dibuja").value=false;
	//Se reinicia la secuencia del contador
	document.getElementById("contador").value="";
	document.getElementById('myCanvas').style.display='none';
	indice=0;
	if(ventana_sec!=null)
		ventana_sec.close();
	if(ventana_sec2 != null)
		ventana_sec2.close();

	//Solo puede haber una opcion seleccionada
	if(e==1){
		document.getElementById("operation2").checked=false;
		document.getElementById("operation3").checked=false;
		document.getElementById("operation4").checked=false;
	}
	if(e==2){
		document.getElementById("operation").checked=false;
		document.getElementById("operation3").checked=false;
		document.getElementById("operation4").checked=false;
	}
	if(e==3){
		document.getElementById("operation").checked=false;
		document.getElementById("operation2").checked=false;
		document.getElementById("operation4").checked=false;
	}
	if(e==4){
		document.getElementById("operation").checked=false;
		document.getElementById("operation2").checked=false;
		document.getElementById("operation3").checked=false;
		ventana_sec2=window.open("http://localhost/Proyecto/query.html","","width=550,height=250,scrollbars=yes");
	}

	if(document.getElementById("operation").checked || ((document.getElementById("operation2").checked ||document.getElementById("operation3").checked) && document.getElementById("layer").options[1].selected)){
		document.getElementById("dibuja").value=true;
		document.getElementById('myCanvas').style.display='block';

		if(document.getElementById("operation").checked){
			//PROBAR window.showModalDialog !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
			document.getElementById("Save_Map").disabled="disabled";
			ventana_sec=window.open("http://localhost/Proyecto/name.html","","width=450,height=120,scrollbars=yes");
		}
	}
	else if(document.getElementById("operation2").checked && !document.getElementById("layer").options[1].selected){

		alert("Error. Layer \"rutes\" must be selected before selection.\nPlease, select layer rutes and press \"Refresh\" button");
		document.getElementById("operation2").checked=false;
		
	}
	else if(document.getElementById("operation3").checked && !document.getElementById("layer").options[1].selected){
		alert("Error. Layer \"rutes\" must be selected before selection.\nPlease, select layer rutes and press \"Refresh\" button");
		document.getElementById("operation3").checked=false;
	}
}
</script>
<script>
function pinta(e){

	var x1;
	var y1;
	var x2;
	var y2;
	
	//Con el evento onclick no hace falta comprobar la posicion en coordenadas
	if(document.getElementById("dibuja").value=="true"){
		
		coord(e);
		
		//Las coordenadas x estan en las posiciones pares, las y en las impares
		arrayCoord[indice]=x;
		arrayCoord[indice+1]=y;
		indice=indice+2;

		if(document.getElementById("contador").value == ""){
			document.getElementById("coordX1").value = (x);
			document.getElementById("coordY1").value = (y);
		}
		if(document.getElementById("contador").value == "1"){
			document.getElementById("coordX2").value = (x);
			document.getElementById("coordY2").value = (y);
		}
		document.getElementById("contador").value+=1;
		//La secuencia "11" indica que se han recibido las 2 coordenadas que delimitan un segmento
		if(document.getElementById("contador").value == "11"){
			//A partir del primer segmento solo necesita un punto mas para ir completando la ruta
			document.getElementById("contador").value="1";
			x1=document.getElementById("coordX1").value;
			y1=document.getElementById("coordY1").value;
			x2=document.getElementById("coordX2").value;
			y2=document.getElementById("coordY2").value;
	
			Dibuja(x1,y1,x2,y2);
			
			//El segundo vértice es el primero del nuevo segmento
			document.getElementById("coordX1").value=x2;
			document.getElementById("coordY1").value=y2;
		}
	}

	//for(var i=0;i<arrayCoord.length; i++){
		//alert(arrayCoord[i]);
	//}
  
}
</script>
<script>
//Cambiar esta  funcion para incluirla en la de arriba
function pintaCuadrado(e){

	var x1;
	var y1;
	var x2;
	var y2;
	var x3;
	var y3;
	var x4;
	var y4;
	
	//Con el evento onclick no hace falta comprobar la posicion en coordenadas
	if(document.getElementById("dibuja").value=="true"){
		
		coord(e);
		
		//Las coordenadas x estan en las posiciones pares, las y en las impares
		arrayCoord[indice]=x;
		arrayCoord[indice+1]=y;
		indice=indice+4;

		if(document.getElementById("contador").value == ""){
			document.getElementById("coordX1").value = (x);
			document.getElementById("coordY1").value = (y);
		}
		if(document.getElementById("contador").value == "1"){
			document.getElementById("coordX2").value = (x);
			document.getElementById("coordY2").value = (y);
		}
		document.getElementById("contador").value+=1;
		//La secuencia "11" indica que se han recibido las 2 coordenadas que delimitan un segmento
		if(document.getElementById("contador").value == "11"){
			//A partir del primer segmento solo necesita un punto mas para ir completando la ruta
			document.getElementById("contador").value="1";
			x1=document.getElementById("coordX1").value;
			y1=document.getElementById("coordY1").value;
			x2=document.getElementById("coordX2").value;
			y2=document.getElementById("coordY2").value;
			x3=x1;
			y3=y2;
			x4=x2;
			y4=y1;

			//Se completa el cuadrilatero con el resto de las coordenadas
			arrayCoord[2]=x1;
			arrayCoord[3]=y2;
			arrayCoord[6]=x2;
			arrayCoord[7]=y1;	

			Dibuja(x1,y1,x3,y3);
			Dibuja(x3,y3,x2,y2);
			Dibuja(x2,y2,x4,y4);
			Dibuja(x4,y4,x1,y1);
			saveMap();
		}
	}
}
</script>
<script type="text/javascript">
function coord(e) {
  	x = e.offsetX?(e.offsetX):e.pageX-document.getElementById("myCanvas").offsetLeft;
   	y = e.offsetY?(e.offsetY):e.pageY-document.getElementById("myCanvas").offsetTop;
}
</script>
<script>
function saveMap(){

	var coord =new Array();
	coord=georreferenciar(arrayCoord);
	document.getElementById("arraygeo").value=implode(coord);
	if(arrayCoord!=""){
		if(document.getElementById("operation2").checked){
			ventana_sec=window.open("http://localhost/Proyecto/impress.html","","screen.width,screen.height,scrollbars=yes");
		}
		else{
			document.getElementById("formulario").action="/Proyecto/controller.php";
			document.getElementById("formulario").submit();
		}
		
	}
	else{
		alert("Please, make a rute first");
	}
}
</script>
<script>
function georreferenciar(coordArray){


	var u;
	var v;
	var x1;
	//var x2;
	var y1;
	//var y2;

	var coordenadas = new Array();

	//El array indexa de 2 en 2 (coordenadas x e y)
	for(var i=0;i<coordArray.length; i+=2){
		//sacamos el valor u (proyeccion en el eje x)
		u=coordArray[i]/500;
		//sacamos el valor u (proyeccion en el eje y)
		v=coordArray[i+1]/400;

		//Sacamos la pryeccion de la x real en el borde inferior del mapa
		x1=u*(x1max-x1min)+x1min;
		//Sacamos la pryeccion de la x real en el borde superior del mapa
		//x2=u*(x2max-x2min)+x2min;
		//Sacamos la pryeccion de la y real en el borde izquierdo del mapa
		y1=v*(y1max-y1min)+y1min;
		//Sacamos la pryeccion de la y real en el borde derecho del mapa
		//y2=v*(y2max-y2min)+y2min;

		coordenadas[i]=x1;
		coordenadas[i+1]=y1;
	}

	/*for(var i=0;i<coordenadas.length; i++){
		alert(coordenadas[i]);
	}*/

	return coordenadas;

//Creo que esto esta mal por el error de la x y la y

/*	var u;
	var v;
	var x1;
	var x2;
	var y1;
	var y2;

	//Coordenadas de los vectores directores
	var dir1x;
	var dir1y
	var dir2x;
	var dir2y;

	//Coordenadas del punto
	var X;
	var Y;
	//El array indexa de 2 en 2 (coordenadas x e y)
	for(var i=0;i<coordArray.length; i+=2){
		//sacamos el valor u (proyeccion en el eje x)
		u=coordArray[i]/500;
		//sacamos el valor u (proyeccion en el eje y)
		v=coordArray[i+1]/400;

		//Sacamos la pryeccion de la x real en el borde inferior del mapa
		x1=u*(x1max-x1min)+x1min;
		//Sacamos la pryeccion de la x real en el borde superior del mapa
		x2=u*(x2max-x2min)+x2min;
		//Sacamos la pryeccion de la y real en el borde izquierdo del mapa
		y1=v*(y1max-y1min)+y1min;
		//Sacamos la pryeccion de la y real en el borde derecho del mapa
		y2=v*(y2max-y2min)+y2min;

		dir1x=x1-x2;
		//La y no tendrá un error importante???????????????????????????????????????????????????
		dir1y=y1max-y1min;
		 
	}*/
}
</script>

<script>
function implode(array){
  var imploded=array[0];
  for (i=1; i<array.length; i++)imploded += '|' + array[i];
  return imploded
}
</script>

<script language="javascript">

function pan(direction) {    
    var pansize = 0.1;
	var x, y;

    if(direction == 'n') {
      	x = ([mapwidth]-1)/2.0;
	  	y = ([mapheight]-1) + [mapheight]*pansize - [mapheight]/2.0;
    } else if(direction == 'nw') {
   	  	x = ([mapwidth]-1) + [mapwidth]*pansize - [mapwidth]/2.0;
      	y = ([mapheight]-1) + [mapheight]*pansize - [mapheight]/2.0;
    } else if(direction == 'ne') {
      	x = 0 - [mapwidth]*pansize + [mapwidth]/2.0;
      	y = ([mapheight]-1) + [mapheight]*pansize - [mapheight]/2.0;
    } else if(direction == 's') {
      	x = ([mapwidth]-1)/2.0;
	  	y = 0 - [mapheight]*pansize + [mapheight]/2.0;
    } else if(direction == 'sw') {
    	x = ([mapwidth]-1) + [mapwidth]*pansize - [mapwidth]/2.0;
      	y = 0 - [mapheight]*pansize + [mapheight]/2.0;  
    } else if(direction == 'se') {
      	x = 0 - [mapwidth]*pansize + [mapwidth]/2.0;
      	y = 0 - [mapheight]*pansize + [mapheight]/2.0;
    } else if(direction == 'e') {
      	x = 0 - [mapwidth]*pansize + [mapwidth]/2.0;
      	y = ([mapheight]-1)/2.0;
    } else if(direction == 'w') {
      	x = ([mapwidth]-1) + [mapwidth]*pansize - [mapwidth]/2.0;
      	y = ([mapheight]-1)/2.0;
    }

	document.mainform.zoomdir[1].checked=true;
    document.mainform.imgxy.value = x + " " + y;
    document.mainform.submit();
}

</script>

</body>
</html>